import React, {Component} from 'react';
import withStyles from "@material-ui/core/styles/withStyles";
import GridContainer from "../../components/Grid/GridContainer";
import GridItem from "../../components/Grid/GridItem";
import Card from "../../components/Card/Card";
import CardBody from "../../components/Card/CardBody";
import MaterialTable, {MTableToolbar} from 'material-table';
import Modal from '@material-ui/core/Modal';
import Button from '@material-ui/core/Button';
const tableStyles = (theme => ({
    cardCategoryWhite: {
        color: "rgba(255,255,255,.62)",
        margin: "0",
        fontSize: "14px",
        marginTop: "0",
        marginBottom: "0"
    },
    cardTitleWhite: {
        color: "#FFFFFF",
        marginTop: "0px",
        minHeight: "auto",
        fontWeight: "300",
        fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
        marginBottom: "3px",
        textDecoration: "none"
    },
    paper: {
        position: 'absolute',
        width: 400,
        backgroundColor: theme.palette.background.paper,
        outline: 'none',
    },
    confirm:{
        margin: theme.spacing(5,5),
    },
    myButton:{
        marginLeft: theme.spacing(10)
    }
}));
class RoleManager extends Component{
    constructor(props) {
        super(props);
        this.state={
            showModal:false,
            columns: [
                { title: '角色名称', field: 'name' },
                { title: '标识', field: 'remark' },
                { title: '状态', field: 'status',
                  lookup:{
                    1:'开启',
                    0:'关闭'
                  }},
                { title: '创建时间', field: 'create_time',type:"datetime"},
            ],
            data: [
                { name: '系统管理员', remark: 'administrator', status: 1, create_time: "2019-07-15 15:01:34"},
                { name: '管理员', remark: 'admin', status: 1, create_time: "2019-07-15 15:04:45" },
                { name: '普通用户', remark: 'member', status: 1, create_time: "2019-07-15 15:08:34" },
            ],
        }
    }

    showPermission=(event,rowData)=>{
        this.setState({
            showModal:true
        })
    }
    closeModal=()=>{
        this.setState({
            showModal:false
        })
    }
    getModalStyle = ()=>{
        const top = 50 ;
        const left = 50;

        return {
            top: `${top}%`,
            left: `${left}%`,
            transform: `translate(-${top}%, -${left}%)`,
        };
    }

    confirmPermission=()=>{
        this.setState({
            showModal:false
        })
    }

    cancelPermission=()=>{
        this.setState({
            showModal:false
        })
    }
    render() {
        const { classes } = this.props;
        return (
            <div>
                <GridContainer>
                    <GridItem xs={12} sm={12} md={12}>
                        <Card>
                            <CardBody>
                                <MaterialTable
                                    components={{
                                        Toolbar: props => (
                                            <div style={{ backgroundColor: '#e8eaf5' }}>
                                                <MTableToolbar {...props} />
                                            </div>
                                        )
                                    }}
                                    options={{
                                        search:true,
                                        actionsColumnIndex: -1
                                    }}
                                    title=""
                                    columns={this.state.columns}
                                    data={this.state.data}
                                    localization={{
                                        header: {
                                            actions: '操作'
                                        },
                                        toolbar: {
                                            searchTooltip:"搜索",
                                            searchPlaceholder:"搜索",
                                        },
                                        body: {
                                            emptyDataSourceMessage: '当前没有数据',
                                            addTooltip:'新增',
                                            deleteTooltip:"删除",
                                            editTooltip:"编辑",
                                            filterRow:{
                                                filterTooltip:"根据当前列进行搜索",
                                            },
                                            editRow:
                                                {
                                                    deleteText:"是否确认删除？",
                                                    cancelTooltip:'取消',
                                                    saveTooltip:"确认"
                                                },
                                        }
                                    }}
                                    editable={{
                                        onRowAdd: newData =>
                                            new Promise(resolve => {
                                                setTimeout(() => {
                                                    resolve();
                                                    const data = this.state.data;
                                                    data.push(newData);
                                                    this.setState({
                                                        data:data
                                                    })
                                                }, 600);
                                            }),
                                        onRowUpdate: (newData, oldData) =>
                                            new Promise(resolve => {
                                                setTimeout(() => {
                                                    resolve();
                                                    const data = this.state.data;
                                                    data[data.indexOf(oldData)] = newData;
                                                    this.setState({
                                                        data:data
                                                    })
                                                }, 600);
                                            }),
                                        onRowDelete: oldData =>
                                            new Promise(resolve => {
                                                setTimeout(() => {
                                                    resolve();
                                                    const data = this.state.data;
                                                    data.splice(data.indexOf(oldData), 1);
                                                    this.setState({
                                                        data:data
                                                    })
                                                }, 600);
                                            }),
                                    }}
                                    actions={[
                                        {
                                            icon: 'person',
                                            tooltip: '权限模块',
                                            onClick: (event, rowData) => {
                                                this.showPermission(event,rowData)
                                            }
                                        }
                                    ]}
                                />
                            </CardBody>
                        </Card>
                    </GridItem>
                    <Modal
                        aria-labelledby="simple-modal-title"
                        aria-describedby="simple-modal-description"
                        open={this.state.showModal}
                        onClose={this.closeModal.bind(this)}>
                        <div style={this.getModalStyle()} className={classes.paper}>
                        <MaterialTable
                            title="选择模块"
                            data={[
                                {
                                    id: 1,
                                    name: '用户管理',
                                },
                                {
                                    id: 2,
                                    name: '增加用户',
                                    parentId: 1,
                                },
                                {
                                    id: 3,
                                    name: '删除用户',
                                    parentId: 1,
                                },
                                {
                                    id: 4,
                                    name: '日志操作',
                                },
                                {
                                    id: 5,
                                    name: '设备管理',
                                },
                                {
                                    id: 6,
                                    name: '增加设备',
                                    parentId: 5,
                                },
                                {
                                    id: 7,
                                    name: '删除设备',
                                    parentId: 5,
                                },
                            ]}
                            columns={[
                                { title: 'ID', field: 'id',hidden:true},
                                { title: '权限', field: 'name'},
                            ]}
                            parentChildData={(row, rows) =>{
                                let selectRows =  rows.find(a => a.id === row.parentId)
                                return selectRows
                                 }
                               }
                            options={{
                                selection: true,
                                search:false,
                                paging:false,
                                showTextRowsSelected:false,
                                showSelectAllCheckbox:false
                            }}
                            onRowSelected={(rows) => alert('You selected ' + rows.length + ' rows')}
                            onSelectionChange={(rows)=>{
                                let arr = [];
                                for(let i = 0; i < rows.length; i++) {
                                    if(!arr.some(x=>x.id===rows[i].id)) {
                                        arr.push(rows[i]);
                                    }
                                }
                                console.info(arr)
                                return arr;
                            }
                            }
                            localization={{
                                toolbar: {
                                    nRowsSelected: '{0} row(s) selected'
                                },
                            }}
                        />
                        <div className={classes.confirm}><Button
                                      variant="contained"
                                      color="primary"
                                      className={classes.myButton}
                                      onClick={this.confirmPermission.bind(this)}
                                      >
                            确认
                        </Button>
                            <Button
                                     variant="contained"
                                     color="primary"
                                     className={classes.myButton}
                                     onClick={this.cancelPermission.bind(this)}
                                     >
                                取消
                            </Button></div>
                        </div>
                    </Modal>
                </GridContainer>
            </div>
        )
    }
}
export default withStyles(tableStyles)(RoleManager);